<template>
  <view 
    class="nav-bar"
    :style="{ 
      height: navHeight + 'rpx',
      paddingTop: statusBarHeight + 'rpx'
    }"
  >
    <view class="content">
      <text class="title">{{ title }}</text>
      <text class="subtitle">{{ subtitle }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: String,
    subtitle: String
  },
  
  setup() {
    const sysInfo = uni.getSystemInfoSync()
    const statusBarHeight = sysInfo.statusBarHeight
    const navHeight = statusBarHeight + (sysInfo.system.includes('iOS') ? 44 : 48)
    
    return {
      statusBarHeight,
      navHeight
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-bar {
  background-color: #3872FE;
  
  .content {
    padding: 0 30rpx;
    
    .title {
      font-size: 36rpx;
      color: #fff;
      font-weight: bold;
      display: block;
      margin-bottom: 8rpx;
    }
    
    .subtitle {
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.8);
    }
  }
}
</style>